<template>
  <div class="sale-legend">
    <div class="inline item" v-for="(color, name) in legendInfo[showBuildingsRight]" :key="name">
      <div class="color inline" :style="`background-color: ${color};`"></div>
      <div class="label inline">{{name}}</div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import legendInfo from '../libs/legend_info'
export default {
  data() {
    return {
      legendInfo
    }
  },
  computed: {
    ...mapState({
      showBuildingsRight: state => state.showBuildingsRight
    })
  }
}
</script>

<style lang="less" scoped>
.sale-legend{
  text-align: center;
  margin-bottom: 10px;
  margin-top: 10px;
}
.item{
  width: 100px;
  text-align: left;
  margin: 5px;
  .color{
    width: 20px;
    height: 15px;
    margin-right: 5px;
    text-align: center;
  }
}
</style>